<template>
	<div class="sys-org-container">


		<!-- <el-row :gutter="5" style="width: 100%; flex: 1">
			<el-col :span="20" :xs="24" style="display: flex; flex-direction: column"> -->
				<screeningCondition :inquireInfo="state.inquireInfo" @getChildren="getData">
					<el-button type="primary" icon="ele-Plus" @click="openAddOrg" v-auth="'sysOrg:add'">
						新增
					</el-button>
				</screeningCondition>


				<el-card class="full-table" shadow="hover" style="margin-top: 5px">
					<el-table :data="state.Data" v-loading="state.loading" row-key="id" default-expand-all border
						highlight-current-row @current-change="handleRowChange" :header-cell-style="{
							background: 'var(--el-color-primary)',
							height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px'
						}" :cell-style="{ padding: '2px' }">
						<el-table-column type="index" label="序号" align="center" />
						<el-table-column prop="TemplateNo" label="模板编号" width="120" align="center"
							show-overflow-tooltip />
						<el-table-column prop="temlogicName" label="模板名称" header-align="center" align="center"
							show-overflow-tooltip />
						<el-table-column prop="holdingPoint" label="是否请求第三方库位" header-align="center" align="center"
							show-overflow-tooltip>
							<template v-slot="scope">
								<span v-if="scope.row.holdingPoint === 1">是</span>
								<span v-else>否</span>
							</template>
						</el-table-column>
						<el-table-column prop="pointNum" label="点位数" width="70" align="center" show-overflow-tooltip />
						<el-table-column label="操作" width="150" fixed="right" align="center" show-overflow-tooltip>
							<template #default="scope">
								<el-button size="small" type="primary" @click="openEdit(scope.row)"
									v-auth="'sysOrg:update'"> 编辑
								</el-button>
								<el-button size="small" type="danger" @click="deleteOne(scope.row)">
									删除 </el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-model:current-page="state.queryParams.page"
						v-model:page-size="state.queryParams.pageSize" :page-sizes="[10, 20, 30, 40]"
						layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
				</el-card>
			<!-- </el-col>
		</el-row> -->


		<el-drawer v-model="editDrawer" title="编辑模板" :append-to-body="true" size="30%">
			<el-form :model="state.ruleForm" ref="editRuleFormRef" label-width="auto" class="fl">
				<el-form-item label="编号" prop="TemplateNo"
					:rules="[{ required: true, message: '编号不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.TemplateNo" placeholder="模板编号" clearable class="input" disabled />
				</el-form-item>
				<el-form-item label="名称" prop="temlogicName"
					:rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.temlogicName" placeholder="模板名称" clearable class="input" />
				</el-form-item>
				<el-form-item label="点位数" prop="pointNum"
					:rules="[{ required: true, message: '点位数不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.pointNum" placeholder="点位数" clearable class="input" />
				</el-form-item>
				<el-form-item label="是否请求第三方库位" prop="holdingPoint"
					:rules="[{ required: true, message: '状态不能为空', trigger: 'blur' }]">
					<el-radio-group v-model="state.ruleForm.holdingPoint" class="ml-4">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div style="width: 100%;display: flex;justify-content: center;margin-top:60px">
				<el-button @click="submitEdit" type="primary" round style="width:80px;height:30px">确认</el-button>
				<el-button @click="editDrawer = false" round style="width:80px;height:30px">取消</el-button>
			</div>
		</el-drawer>
		<el-drawer v-model="addDrawer" title="新增模板" :append-to-body="true" size="30%">
			<el-form :model="state.ruleForm2" ref="ruleFormRef" label-width="auto" class="fl">
				<el-form-item label="编号" prop="TemplateNo"
					:rules="[{ required: true, message: '编号不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm2.TemplateNo" placeholder="模板编号" clearable class="input" />
				</el-form-item>
				<el-form-item label="名称" prop="temlogicName"
					:rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm2.temlogicName" placeholder="模板名称" clearable class="input" />
				</el-form-item>
				<el-form-item label="点位数" prop="pointNum"
					:rules="[{ required: true, message: '点位数不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm2.pointNum" placeholder="点位数" clearable class="input" />
				</el-form-item>
				<el-form-item label="是否请求第三方库位" prop="holdingPoint"
					:rules="[{ required: true, message: '是否请求第三方库位不能为空', trigger: 'blur' }]">
					<el-radio-group v-model="state.ruleForm2.holdingPoint" class="ml-4">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>

			</el-form>

			<div style="width: 100%;display: flex;justify-content: center;margin-top:60px">
				<el-button @click="submit" type="primary" round style="width:80px;height:30px">确认</el-button>
				<el-button @click="addDrawer = false" round style="width:80px;height:30px">取消</el-button>
			</div>
		</el-drawer>
		<EditPos ref="editPosRef" :title="state.editPosTitle" @handleQuery="getData" />
	</div>
</template>
<script lang="ts" setup name="Warehouse">
import { onMounted, reactive, ref, toRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import screeningCondition from '/@/views/tools/screeningCondition.vue'
import { getAPI } from '/@/utils/axios-utils';
import formDrawer from '/@/views/system/warehouse/component/formDrawer.vue';
import { WmsApi } from '/@/api/wh';
import EditPos from '/@/views/system/agvTaskTemplate/component/editPos.vue';

const addDrawer = ref(false);
const editDrawer = ref(false);
const editPosRef = ref()
const innerDrawer = ref(false);
const editRuleFormRef = ref()

const ruleFormRef = ref()
const state = reactive({
	editPosTitle: '',
	loading: false,
	Data: [],
	queryParams: {
		TemplateNo: "",
		temlogicName: undefined,
		holdingPoint: undefined,
		page: 1,
		pageSize: 20,
	},
	dataonLineListSelections: [],
	editOrgTitle: '',
	belongWarehouses: [],
	relationTitle: '',
	ruleForm: {},
	ruleForm2: {},
	id: 0,
	inquireInfo: [
		{
			label: "模板编号",
			value: "",
			key: "TemplateNo",
			options: [],
			type: 'input'
			//待让后端做分页
		},
		{
			label: "模板名称",
			value: "",
			key: "temlogicName",
			options: [],
			type: 'input'

		},
		// {
		// 	label: "是否请求第三方库位",
		// 	value: "",
		// 	key: "holdingPoint",
		// 	options: [
		// 		{
		// 			value: 0,
		// 			label: "否",
		// 		},
		// 		{
		// 			value: 1,
		// 			label: "是",
		// 		},
		// 	],
		// 	type: "select",
		// }
	],
	previousCondition: {},
	total: 0
});
onMounted(() => {
	getData(state.queryParams)
	//请求接口获得模态框中类型列表的数据，赋值给orgTypeList=orgData

})
const currentRow = ref()
const handleSwitch = (row) => {
	console.log(row);
}
// 查询操作
// const handleQuery = async () => {
// 	await WmsApi().modelPagePost()
// 		.then(function (res) {
// 			state.Data = res.data.result;
// 			state.total = res.data.result.length;
// 		})
// 		.catch(function (error) {
// 			console.log(error);
// 		});

// };
const getData = async (value) => {


	//把用户输入的条件保存下来
	state.previousCondition = value

	if (value) {
		state.queryParams.TemplateNo = value.TemplateNo;
		state.queryParams.temlogicName = value.temlogicName;
	}

	// state.queryParams.holdingPoint = value.holdingPoint;
	await WmsApi().modelPagePost(state.queryParams)
		.then(function (res) {

			state.Data = res.data.result.items;
			state.total = res.data.result.total;

		})
		.catch(function (error) {
			console.log(error);
		});
}
const selectionLineChangeHandle = (val) => {
	state.dataonLineListSelections = val
}
const handleTochangepwd = () => {

}
const cancel = () => {
}


// 打开新增页面
const openAddPos = () => {
	state.editPosTitle = '添加职位';
	editPosRef.value?.openDialog({ status: 1, orderNo: 100 });
};

// 打开编辑页面
const openEditPos = (row: any) => {
	state.editPosTitle = '编辑职位';
	editPosRef.value?.openDialog(row);
};
// 打开新增页面
const openAddOrg = () => {
	// state.ruleForm2 = {};
	// addDrawer.value = true;
	state.editPosTitle = '添加RCS模板';
	editPosRef.value?.openDialog({ status: 1 });
};

// 打开编辑页面
const openEdit = (row) => {

	// editDrawer.value = true;
	// state.ruleForm = row;
	state.editPosTitle = '编辑RCS模板';
	editPosRef.value?.openDialog(row);
};
const deleteOne = (row) => {
	let that = this;
	ElMessageBox.confirm(`确定删除该区域：【${row.temlogicName}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {


			await WmsApi().modelPageDelete(row.TemplateNo)
				.then(function (res) {
					ElMessage.success('删除成功');
					getData(state.queryParams);
				})
		})
		.catch((error) => {
			console.log(error);

			ElMessage({
				type: 'info',
				message: 'Delete canceled',
			})
		});
};
const handleSizeChange = (val) => {
	state.queryParams.TemplateNo = state.previousCondition.TemplateNo;
	state.queryParams.temlogicName = state.previousCondition.temlogicName;
	state.queryParams.holdingPoint = state.previousCondition.holdingPoint;
	state.queryParams.pageSize = val;
	getData(state.queryParams);
};
const handleCurrentChange = (newVal) => {
	state.queryParams.TemplateNo = state.previousCondition.TemplateNo;
	state.queryParams.temlogicName = state.previousCondition.temlogicName;
	state.queryParams.holdingPoint = state.previousCondition.holdingPoint;
	state.queryParams.pageNum = newVal;
	getData(state.queryParams);
};
const handleRowChange = (val) => {
	currentRow.value = val;
}




</script>
<style lang="scss" scoped>
.lie .el-form-item {
	margin-bottom: 30px;
	font-size: 16px;
}

.fl {
	/* // padding: 20px; */
	width: 60%;
	margin: 20px 80px;

}

.hang {
	display: flex;
}

.radius {
	height: 22px;
	width: 164.75px;
	border: 1px solid var(--el-border-color);
	border-radius: 5px;
	background-color: #ddd;
	padding-left: 5px;
	padding-top: -4px;
	color: #afabb9;
	background-color: #f5f7fa;
	/*    margin-top: 20px; */
}

.container {
	margin-top: 15px;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: calc(100% - 82px);
}

.table {
	width: 100%;
	flex: 1;
	height: 100%;
}

.el-table {
	width: 100%;
}

.extra {
	width: 170px;
	height: 80px;

	:deep(.el-textarea__inner) {
		height: 80px;
	}
}
</style>